<template>
  <!-- 推荐页面的导航标题子组件 -->
  <div class="nav_head">
    <div class="left">
      <span style="color: #c10d0c; font-size: 14px"></span>
      <span class="title">{{ title }}</span>
    </div>
    <div class="right">
      <span
        style="font-size: 16px; color: #666; margin-right: 10px"
        @click="handleMore"
        >更多</span
      >
      <span style="color: #c10d0c; font-size: 14px; font-weight: 700"></span>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "NavHead",
  props: {
    title: {
      type: String,
      default: "",
      require: true,
    },
  },
  setup(props, context) {
    // 点击更多事件
    let handleMore = () => {
      context.emit("handleMore");
    };
    return { handleMore };
  },
});
</script>
<style scoped>
.nav_head {
  width: 100%;
  margin: 20px 0;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;

  border-bottom: 2px solid #c10d0c;
}

.title {
  font-size: 20px;
  color: #222;
  margin-left: 10px;
}
.right {
  cursor: pointer;
}
</style>
